<!-- 变更选择框 -->
<template>
  <div>
    <a-select
      :allowClear="allowClear"
      :mode="multi == true ? 'multiple' : 'default'"
      style="width: 100%;"
      :placeholder="placeholder"
      @deselect="deselect"
      v-model="ids"
      :open="open"
      :disabled="disabled"
      @change="selectChange"
      @dropdownVisibleChange="selectIds"
    >
      <a-select-option v-for="item in selectedObj" :key="item.id">
        {{ item.finalNo }}
      </a-select-option>
    </a-select>
    <SelectHrTrainingChangeInputModal
      ref="inputModal"
      :urlList="this.url.urlList"
      :multi="multi"
      @choseObj="choseObj"
    ></SelectHrTrainingChangeInputModal>
  </div>
</template>

<script>
import SelectHrTrainingChangeInputModal from './SelectHrTrainingChangeInputModal'
import { getAction } from '@/api/manage'

export default {
  name: 'SelectHrTrainingChangeInput',
  components: { SelectHrTrainingChangeInputModal },
  props: {
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    placeholder: {
      type: String,
      required: false,
      default: '请选择培训档案'
    },
    open: {
      type: Boolean,
      required: false,
      default: false
    },
    value: {
      type: String,
      required: false,
      default: ''
    },
    multi: {
      type: Boolean,
      default: false,
      required: false
    },
    // 是否支持清除，默认支持
    allowClear: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      ids: [],
      selectedObj: [],
      deleteIds: [],
      list: [],
      objs: '',
      url: {
        queryById: '/api/erp/hr/training/erpHrTrainingFinal/queryById',
        queryByIds: '/api/erp/hr/training/erpHrTrainingFinal/queryByIds',
        urlList: '/api/erp/hr/training/erpHrTrainingFinal/allList'
      }
    }
  },
  mounted() {
    this.initObj(this.value)
  },
  watch: {
    value(val) {
      this.initObj(val)
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  methods: {
    initObj(ids) {
      this.deleteIds = []
      this.selectedObj = []
      if (ids && ids.length > 0) {
        this.ids = ids.split(',')
        let url = this.url.queryById
        let param = { id: ids }
        getAction(url, param).then((res) => {
          if (res.success) {
            if (!Array.isArray(res.result)) {
              this.selectedObj.push(res.result)
            } else {
              for (let i = 0; i < res.result.length; i++) {
                this.selectedObj.push(res.result[i])
              }
            }
            this.$refs.inputModal.edit(res.result, this.ids)
          }
        })
      } else {
        this.ids = []
        this.$refs.inputModal.edit(null, null)
      }
    },
    loadData(url) {
      this.$refs.inputModal.loadData(null, url)
    },
    resetObj() {
      this.userType = false
      this.ids = []
      this.selectedObj = []
      this.deleteIds = []
      this.open = false
      this.$refs.inputModal.edit(null, null)
    },
    selectIds() {
      if (!this.disabled) {
        this.deleteId()
        this.$refs.inputModal.add(this.selectedObj, this.ids)
      }
    },
    deselect(value, option) {
      this.deleteIds.push(value)
      this.deleteId()
      this.choseObj(this.selectedObj)
    },
    selectChange() {
      if (!this.ids || this.ids.length == 0) {
        this.selectedObj = []
        let choseObj = [];
        this.selectedObj.choseObj = choseObj;
        this.choseObj(this.selectedObj)
      }
    },
    deleteId() {
      let that = this
      this.selectedObj = this.selectedObj.filter(function (e) {
        return that.deleteIds.indexOf(e.id) == -1
      })
      this.deleteIds = []
    },
    // 子modal回调
    choseObj: function (list) {
      let data = list.choseObj
      this.selectedObj = list.choseObj
      this.ids = []
      for (var i = 0; i < data.length; i++) {
        this.ids.push(data[i].id)
      }
      this.objs = this.ids.join(',')
      this.$emit('change', this.objs)
      this.$emit('back', this.selectedObj)
      this.$emit('input', list)
    }
  }
}
</script>
